<template>
    <div class="container">
        <div class="bady">
            <div class="list">
                <p>组织架构名称</p>
            </div>
            <div class="table" v-for="item in dataList" :key="item.id">
                <div style="width: 200px;">
                    {{item.name}}
                </div>
                <div style="margin-top: 10px;margin-left: 10px;">
                    授权人员
                </div>
                <div class="display: flex;">
                    <div>
                        <el-tag :key="tag" v-for="tag in item.permissions" style="margin-right: 10px;" :disable-transitions="false"
                            @close="handleClose(tag)">
                            {{tag.userName}}
                        </el-tag>
                        <el-button plain icon="el-icon-plus" style="margin-left: 10px;" @click="selectPerson(item)">添加</el-button>
                    </div>
                   
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import { findUserIdsAll, editRoles } from '../../api/index';
    export default {
        name: 'invitation',
        data() {
            return {
                dataList: ''
            };
        },
        created() {
            this.getData()
        },
        methods: {
            async selectPerson(row) {
                const userid = row.permissions.map(item => item.userId)
                let result = await this.$ddapi.selectOrg( [...userid])
                if (result.users.length) {
                    const ids = result.users.map(item => item.emplId).join(',');
                    let data = {
                        roleId: row.id,
                        userIds: ids
                    }
                    let res = await editRoles(data)
                    if (res.data.status == 100) {
                        this.getData()
                    }

                }
            },
            async getData() {
                let res = await findUserIdsAll()
                if (res.data.status == 100) {
                    this.dataList = res.data.data
                }
            },
        }
    };
</script>

<style scoped>
    .list {
        border-bottom: 1px solid #999;
        padding-bottom: 10px;

    }

    .table {
        /* display: flex; */
        padding-top: 10px;
        padding-bottom: 13px;
        border-bottom: 1px dashed #999;


    }
</style>